<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>青花瓷</div>
    <div>轨迹</div>
    <div>东风破</div>
    <div>发如雪</div>
    <ul>
        <li>因为爱情</li>
        <li>浮夸</li>
        <li>好久不见</li>
        <li>富士山下</li>
    </ul>
    <span>11</span>
    <span>22</span>
    <span>33</span>
    <script>
        $(function(){
            // 隐式迭送,相同的操作
            $('ul li').css('color','red');
            $.each($('div'),function(i, ele){

            // 2.$.each(要遍历的目标,函数(i, ele){
            //     i 索引号, ele 是 DOM 元素 
            // });
                console.log(i, ele);
            });
            
            // 案例
            var arr = ['red', 'blue', 'green', 'purple']
            $.each($('ul li'),function(index, ele){
                console.log(index, ele);
                // ele.style.display = 'none';
                $(ele).css('color',arr[index]);
            });

            // 求和
            var sum = 0;
            $.each($('span'),function(i, ele){
                var temp = $(ele).html();
                console.log(temp);
                // 字符串转化为  整形
                temp = parseInt(temp);
                sum = sum + temp;
            });
            console.log(sum);
        });
    </script>
</body>
</html>